<script setup>
// 引入组件
import LinCard01 from '../components/cards/LinCard01.vue';
import LinCard02 from '../components/cards/LinCard02.vue';
import HomeSwiper from '../components/HomeSwiper.vue';
import LinCardImage from '../components/cards/LinCardImage.vue';
import LinCardContent from '../components/cards/LinCardContent.vue';
import LinCardTime from '../components/cards/LinCardTime.vue';
import LinFooter from '../components/LinFooter.vue';
import LinCardHead from '../components/cards/LinCardHead.vue';
import LinCard03 from '../components/cards/LinCard03.vue';
import LinCardButton from '../components/cards/linCardButton.vue';
import LButtonTag from '../components/buttons/compotents/LButtonTag.vue';
import LTagBox from '../components/buttons/compotents/LTagBox.vue';
import { useArticleStore } from '../store';
const { setArticleList } = useArticleStore()

// 关于button卡片的参数
const buttonData = reactive(
    [
        {
            text: 'Github',
            icon: '#icon-github2',
            url: 'https://github.com/',
        },
        {
            text: 'Gitee',
            icon: '#icon-git2',
            url: 'https://gitee.com/',
        },
        {
            text: '微博',
            icon: '#icon-weibo2',
            url: 'https://weibo.com/',
        },
        {
            text: '掘金',
            icon: '#icon-lianjie3',
            url: 'https://juejin.cn/',
        },
        {
            text: 'Bilibili',
            icon: '#icon-lianjie',
            url: 'https://www.bilibili.com/',
        },


    ]
)
// 关于tag卡片的参数
const tags = reactive([
    {
        text: 'Vue',
        url: 'https://cn.vuejs.org/',
    },
    {
        text: 'TypeScript',
        url: 'https://www.tslang.cn/',
    },
    {
        text: 'JavaScript',
        url: 'https://www.javascript.com/',
    },
    {
        text: 'HTML',
        url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
    },
    {
        text: 'CSS',
        url: 'https://developer.mozilla.org/zh-CN/docs/Web/CSS',
    },
    {
        text: 'Node.js',
        url: 'https://nodejs.org/zh-cn/',
    },
    {
        text: 'Python',
        url: 'https://www.runoob.com/python3/python3-tutorial.html',
    },
    {
        text: 'Golang',
        utl: 'https://golang.google.cn/'
    }
])
// 友情链接卡片参数
const linkData = reactive([
    {
        text: '百度',
        url: 'https://www.baidu.com/',
        icon: '#icon-lianjie1',
    },
    {
        text: '阿里云',
        url: 'https://www.aliyun.com/',
        icon: '#icon-lianjie1'
    },
    {
        text: '腾讯云',
        url: 'https://cloud.tencent.com/',
        icon: '#icon-lianjie1'
    }

])


// ----------------------------------------------------------------------------
import { onBeforeMount, onMounted, reactive, ref } from 'vue';
import { getArticleList } from '../request/api/article';
// 文章列表
let article_list = reactive([])
// 小卡片参数
let contents = reactive([])
// 展示列表卡片
const showList = reactive([])
const flag = ref(false)
let tag = ref(0)

let swiperData = reactive([])
// 初始化展示列表
const initarticle_list = () => {
    for (let i = 0; i < 4; i++) {
        showList.push(article_list[i])
        tag.value = i
    }
}
// 获取文章列表
const getArticleC = async () => {
    await getArticleList().then(res => {
        article_list = res.data.data
        swiperData = res.data.data.slice(0, 4)
        contents = res.data.data.slice(0, 4)
        flag.value = true
        if (flag.value) {
            setArticleList(res.data.data)
        }
        // console.log(res.data.data)
        initarticle_list()
    })
}

// 当向下滑动到一定值时，加载新的内容
window.onscroll = () => {
    let scrollTop = document.documentElement.scrollTop
    let clientHeight = document.documentElement.clientHeight
    let bodyHeight = document.body.clientHeight
    if (bodyHeight - scrollTop - clientHeight <= 0) {
        if (tag.value < article_list.length - 1) {
            tag.value++
            showList.push(article_list[tag.value])
        }

    }
}

onBeforeMount(()=>{
    getArticleC()

})



</script>

<template>
    <div class="home">
        <!-- 头部滚动图片和轮播图 -->
        <header>
            <div class="home-top">
                <HomeSwiper :swiperData="swiperData" v-if="flag"></HomeSwiper>
                <div class="right-card">
                    <LinCardImage height="440" v-if="flag" :img="article_list[3].articleImg" />
                    <LinCardImage height="230" v-if="flag" :img="article_list[1].articleImg" :isAnimation="false" />
                </div>
            </div>
        </header>
        <!-- 主体部分 -->
        <main>
            <!-- 左侧卡片 -->
            <aside>
                <LinCardTime />
                <LinCard02 :contents="contents" v-if="flag" />
                <LinCard01 :contents="contents" v-if="flag" />
            </aside>
            <!-- 正文 -->
            <article>
                <LinCardContent v-for="item in showList" :key="item" :articleId="item.articleId" v-if="flag" />
            </article>
            <!-- 右侧卡片 -->
            <aside>
                <LinCardHead />
                <LinCardButton title="关于我">
                    <LButtonTag v-for="(item, index) in buttonData" :key="index" :text="item.text" :url="item.url"
                        :icon="item.icon"></LButtonTag>
                </LinCardButton>
                <LinCard03 />
                <LinCardButton title="我会的">
                    <LTagBox :tags="tags"></LTagBox>
                </LinCardButton>
                <LinCardButton title="友情链接">
                    <LButtonTag v-for="(item, index) in linkData" :key="index" :text="item.text" :url="item.url"
                        :icon="item.icon"></LButtonTag>
                </LinCardButton>

            </aside>
        </main>
        <!-- 底部footer -->
        <footer>
            <LinFooter />
        </footer>
    </div>

</template>

<style lang="scss" scoped>
.home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 100%;

    header {
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 10px;
        padding-bottom: 40px;
        margin-bottom: 20px;
        // background-color: blue;
        z-index: 2;

        .home-top {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: 690px;


            .right-card {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                margin-left: 10px;
            }
        }


    }

    main {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: top;
        width: 1360px;
        margin-bottom: 170px;

        aside {
            width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;

        }

        article {
            width: 60%;
            display: flex;
            flex-direction: column;
            justify-content: left;
            align-items: center;
        }
        
    }

    footer {
        position: fixed;
        bottom: -1px;
        width: 100%;
        z-index: 3;
    }

}
</style>